<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../plugin/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../../plugin/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="../../../plugin/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../../../css/style.css">
</head>
<body>
<div class="container">

    <!--
        1. 面包屑导航
        2. 搜索区
        3. 数据表格
    -->

    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li>系统管理</li>
            <li class="active">用户管理</li>
        </ol>
    </div>
    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">

                <div class="col-md-4">
                    <label class="control-label col-md-3">用户名</label>
                    <div class="col-md-8"> <input class="form-control"/></div>
                </div>
                <div class="col-md-4">
                    <label class="control-label col-md-4">用户角色</label>
                    <div class="col-md-8"> <select class="form-control" id="sltRoles"></select></div>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-success">搜索</button>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <table id="list">

        </table>

    </div>

</div>


<div id="toolbar" class="btn-group">
    <button class="btn btn-primary" id="btnAdd"><i class="fa fa-pencil" aria-hidden="true"></i>添加</button>
    <button class="btn btn-warning" id="btnEdit">修改</button>
    <button class="btn btn-danger" id="btnRemove">删除</button>
    <button class="btn btn-info">禁用</button>
</div>

<!--
    modal: 内三层，外三层
-->
<div class="modal fade" id="info">
    <div  class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="info_title">添加用户</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
 <input type="hidden" id="userId"/>
                    <div class="form-group">
                        <label class="control-label col-md-3">用户名</label>
                        <div class="col-md-8"><input class="form-control" id="username"/></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">密码</label>
                        <div class="col-md-8"><input class="form-control" id="password"/></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">角色</label>
                        <div class="col-md-8"><select class="form-control" id="role"></select></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div id="saveSuccess" class="info" style="display:none;">添加成果</div>
                <button class="btn btn-primary" id="btnSave">保存</button>
                <button class="btn btn-info">取消</button>
            </div>
        </div>

    </div>

</div>
</body>
<script src="../../../plugin/jquery/jquery.js"></script>
<script src="../../../plugin/bootstrap/js/bootstrap.js"></script>
<script src="../../../plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="../../../plugin/mockjs/mock.js"></script>
<script src="../../../mock/index.js"></script>
<script src="../../../js/user.js"></script>


</html>